<template lang="pug">
.view.cp-config-data.fix-flex-pos
  el-tabs.condata-tabs(v-model="activeName", @tab-click="handleTab")
    el-tab-pane(v-for="(item, index) in paneList" :label="item.label", :name="item.name", :key="index")
  .fix-flex-pos.con-main
    keep-alive
      router-view
</template>

<script>
export default {
  name: 'condata',
  data() {
    return {
      activeName: '',
      paneList: [
        { label: '组织', name: 'organization' },
        { label: '供应链', name: 'supply' },
        // { label: '生产', name: 'yield' },
        // { label: '产品', name: 'product' },
        // { label: '项目管理', name: 'project' },
        // { label: '文件', name: 'file' },
        // { label: '质控', name: 'quality' },
        // { label: '注册', name: 'register' },
      ]
    };
  },
  methods: {
    handleTab () {
      this.$router.push({ name: `condata${this.activeName}` });
    }
  },
  beforeRouteEnter (to, from, next) {
    const path = to.path;
    const activeName = path.split('/')[3];
    next((vm) => {
      vm.activeName = activeName;
    });
  },
  // 监听路由变化
  beforeRouteUpdate (to, from, next) {
    const path = to.path;
    this.activeName = path.split('/')[3];
    next();
  },
  created () {
    this.activeName = this.paneList[0].name;
  },
  mounted() {
  }
};
</script>

<style lang="sass">
@import "../../styles/utils"
$TABHEIGHT: 42px
.cp-config-data
  overflow-x: hidden
  overflow-y: auto
  background: $THEMECOLOR
  .condata-tabs
    position: relative
    height: $TABHEIGHT
    background: white
    padding-left: 20px
    border-top: 2px solid #eee
    .el-tabs__item:focus.is-active.is-focus:not(:active)
      box-shadow: none
    .el-tabs__nav-wrap::after
      background-color: white
  .con-main
    top: $TABHEIGHT
</style>
